{Day27} 小公主訂單網頁嘗試集＿第二十七集＿實作陸天

2022 iThome 鐵人賽

DAY 27

Modern Web

訂單網頁嘗試集系列第 27 篇

14th鐵人賽

icetong

2022-10-12 21:50:39

413 瀏覽

分享至

這20幾天下來，雖然真的是土法煉鋼，但覺得似乎會有更有效的學習方法，像是參考別人地網頁或是觀賞系列教學影片，在做教學或者心得分享，所以來點

來點網頁推薦
台北時裝周
這是我目前看過少數極具美學和網頁的最美好結合
因為稍微看了些這網頁的程式碼，但真的太難

還是要來點實作ㄉ
今天來加點音檔！

<!DOCTYPE html>
<html>
    <head>
       <title>little_princess_web</title>
       <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>
  
<div class="title">
<h1>歡迎光臨小公主網頁嘗試集！</h1>
<h2>訂單網頁嘗試集＿實作</h2>
<link rel="stylesheet" href="homepage.css">

</div>

<body>
  <Marquee direction=right behavior="altemate" >小公主海底世界盛大開幕！！</Marquee>




    <ul class="drop-down-menu">
        <li><a href="https://ithelp.ithome.com.tw/users/20151423">關於小公主</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/articles/10291522">30天鐵人賽目標計畫</a>
        </li>
        <li><a href="https://ithelp.ithome.com.tw/users/20151423/ironman/5260">30天鐵人賽網頁連結</a>
        </li>
        <li><a href="./day25.html">小公主販售ㄉ海底世界</a>
        </li>
    </ul>
<h3>welcome to little_princess_web</h3>
<h3>這裡是小公主，小公主的訂購網頁似乎真的產不出來</h3>
<h3>但目前還是有建立起這個酷東西</h3>
<br>
<img src="./photo/IMG_4003拷貝.jpg" alt="me">

<!-- 回到頂端按鈕 start -->
<script>
    //<![CDATA[
    (function () {
    $("body").append("<img id='goTopButton' style='display: none; z-index: 5; cursor: pointer;' title='回到頂端'/>");
    var img = "http://1.bp.blogspot.com/-zMfrIkyhlVs/Uh7FePoKU8I/AAAAAAAAHnA/WA0H_vbWAWc/s1600/go-top.png",
    locatioin = 5/9, // 按鈕出現在螢幕的高度
    right = 1, // 距離右邊 px 值
    opacity = 1, // 透明度
    speed = 500, // 捲動速度
    $button = $("#goTopButton"),
    $body = $(document),
    $win = $(window);
    $button.attr("src", img);
    $button.on({
    mouseover: function() {$button.css("opacity", 1);},
    mouseout: function() {$button.css("opacity", opacity);},
    click: function() {$("html, body").animate({scrollTop: 0}, speed);}
    });
    window.goTopMove = function () {
    var scrollH = $body.scrollTop(),
    winH = $win.height(),
    css = {"top": winH * locatioin + "px", "position": "fixed", "right": right, "opacity": opacity};
    if(scrollH > 15) {
    $button.css(css);
    $button.fadeIn("slow");
    } else {
    $button.fadeOut("slow");
    }
    };
    $win.on({
    scroll: function() {goTopMove();},
    resize: function() {goTopMove();}
    });
    } )();
    //]]>
    </script>
    <!-- 回到頂端按鈕 end, Design by WFU BLOG -->
    <audio src="https://www.youtube.com/watch?v=6tk9jlKo8y4.mp3" controls>
        <h3>遇到不支援的瀏覽器會出現這行字</h3>
    </audio>
</body>
</html>